<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <ui:composition template="/shared/_layout.xhtml">
        <ui:define name="title">
            <h:outputText value="#{lang._library_details_title}"/>
        </ui:define>
        <ui:define name="css">
            <h:outputStylesheet name="form.css" library="css" />
            <h:outputStylesheet name="details.css" library="css/library" />
        </ui:define>
        <ui:define name="content">
            <article>
                <h1>#{library.article.idArticles.name}</h1>
                <br/>
                <section>
                    <c:if test="#{library.article.idArticles.image != null}">
                        <h:graphicImage id="book-image" alt="#{library.article.idArticles.name}" library="img/books" name="#{library.article.idArticles.image}" width="200"/>
                    </c:if>
                    <h2>
                        <h:outputText value="#{lang._library_details_informations}"/>
                    </h2>
                    <table>
                        <tr>
                            <td>
                                <b>
                                    <h:outputText value="#{lang._library_details_authors}"/>
                                </b>
                            </td>
                            <td>
                                <h:outputText value="#{library.article.idAuthors.name}"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>
                                    <h:outputText value="#{lang._library_details_editors}"/>
                                </b>
                            </td>
                            <td>
                                <h:outputText value="#{library.article.idArticles.idEditors.name}"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>
                                    <h:outputText value="#{lang._library_details_price}"/>
                                </b>
                            </td>
                            <td>
                                <h:outputText value="#{library.article.idArticles.price}"/> €
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>
                                    <h:outputText value="#{lang._library_details_release_date}"/>
                                </b>
                            </td>
                            <td>
                                <h:outputText value="#{library.article.idArticles.releaseDate}"/>
                            </td>
                        </tr>
                    </table>
                </section>
                <section>
                    <h2>
                        <h:outputText value="#{lang._library_details_description}"/>
                    </h2>
                    <p id="book-summary">
                        <h:outputText value="#{library.article.idArticles.summary}"/>
                    </p>
                </section>
                <section>
                    <c:if test="#{library.isAvailable()}">
                        <h:form>
                            <p>
                                <h:commandButton value="#{lang._library_details_add}" action="#{shoppingCart.addArticles(library.article)}"/>
                            </p>
                        </h:form>
                    </c:if>
                </section>
            </article>
        </ui:define>
    </ui:composition>
</html>